<template>
	<view class="MerchantPage">
		<!-- 图片 -->
		<view class="img">
			<image class="image" :src="Url+detailsObj.filePath" v-if="detailsObj.filePath"></image>
		</view>
		<!-- 主体 -->
		<view class="content">
			<view class="nameWrap">
				<view class="name">{{detailsObj.avatarName}}</view>
				<view class="share">
					<button open-type="share" class="shareBut">
						<!-- <image src="../../static/share.png" class="img"></image> -->
						<u-icon label="分享" size="40" name="share-square"></u-icon>
					</button>
				</view>
			</view>
			<view class="information">
				<view class="left">
					<view class="item borderBot" style="margin-left:2px;">联系电话：{{detailsObj.telephone}}</view>
					<view class="item">
						<uni-icons type="location" size="18" color="#6e6158"></uni-icons>
						<text class="local">{{detailsObj.location}}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="right" @click="phoneHandle(detailsObj.telephone)">
					<uni-icons type="phone-filled" size="30" color="#d9d986"></uni-icons>
				</view>
			</view>
			<!-- 店铺介绍 -->
			<view class="name shop">店铺介绍</view>
			<view class="contentShop">{{detailsObj.remarks}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			detailsObj:{
				type:Object,
				required:true,
			}
		},
		data(){
			return{
				Url:uni.$u.http.config.baseURL,
			}
		},
		methods:{
			phoneHandle(telephone){
				uni.makePhoneCall({
					phoneNumber: telephone,
					// 失败回调
					fail: (res) => {
						console.log(res)
					}
				})
			},
		},
		//分享给好友
		onShareAppMessage(res) {
			return {
			    title: this.detailsObj.avatarName,
			    path: `/subpkg/DetailsPage/DetailsPage?title=商户详情&id=${this.detailsObj.id}`,
				imageUrl: this.detailsObj.avatarPath,
			}
		},
	}
</script>

<style lang="scss" scoped>
.MerchantPage{
	overflow: hidden;
	padding-bottom:15px;
	.img{
		height:430rpx;
		.image{
		    height:100%;
			width:100%;
		}
	}
	/* // 主体内容 */
	.content{
		width:720rpx;
		margin:15px auto 0;
		.nameWrap{
			margin-top:10px;
			margin-bottom: 15px;
			display:flex;
			align-items: center;
			justify-content: space-between;
			.name{
				font-size:36rpx;
				font-weight: 800;
			}
		}
		
		.information{
			height:180rpx;
			display: flex;
			align-items: center;
			background:#fff;
			box-sizing: border-box;
			justify-content: space-between;
			.left{
				width:85%;
				box-sizing: border-box;
				padding:0 10px;
				.item{
					display:flex;
					align-items: center;
					font-size:26rpx;
					height:80rpx;
					&.borderBot{
						border-bottom:1px solid #ddd;
					}
					.local{
						margin-left:2px;
						font-size:26rpx;
						color:#6e6158;
					}
				}
			}
			.line{
				height:140rpx;
				width:0.5px;
				background:#ddd;
			}
			.right{
				width:14%;
				display:flex;
				justify-content: center;
				align-items: center;
			}
		}
		// 店铺介绍
		.shop{
			margin:15px 0;
			font-size:36rpx;
			font-weight: 800;
		}
		.contentShop{
			padding:10px;
			background:#fff;
		}
	}
	.share{
		overflow: hidden;
		.img{
			height:30px;
			width:30px;
		}
		.shareBut::after{
			border:none;
		}
		.shareBut{
			height:100% !important;
			padding-left: 0px !important;
			padding-right: 0px !important;
			margin-left:0 !important;
			margin-right:0 !important;
			line-height: 0 !important;
			background :'' !important;
		}
	}
}
</style>